<template>
  <div class="poptipContent intentionLevel">
    <div class="poptipContent">
      <span>跟进&批注</span>
    </div>
    <div class="loadingBox">
      <Spin size="large" fix v-if="popLoading" class="spinBox"> </Spin>
      <div style="max-height: 300px; min-height: 40px; overflow-y: auto"
        v-if="followUpList && followUpList.length > 0">
        <Timeline>
          <TimelineItem v-for="(item, index) in followUpListCon" :key="index">
            <p class="time">
              <span>{{ timeSub(item.operationTime?item.operationTime:item.createTime) }}</span><span>
                {{ item.category == "12" ? "批注人" : "跟进人" }}：{{
                  item.operatorName
                }}</span>
            </p>
            <p class="content">
              {{ item.gistRemark }}
            </p>
          </TimelineItem>
        </Timeline>
      </div>
      <div style="text-align: center" v-else>该客户暂无跟进或批注</div>
    </div>
    <div v-if="flag && flag == 'clue' ? unlocking('0101020300') : unlocking('0101010600')">
      <Button type="primary" size="small" class="M_comments"
        @click="commentsClick">添加批注</Button>
    </div>
    <Modal v-model="modalFlag" @on-cancel="addCancel" confirm :footer-hide="true" title="添加批注">
      <div v-if="intentionLevelFlag" style="padding-bottom:15px;">
        <div style="margin-bottom:10px;">当前客户意向等级（变更后将同步至顾问客户信息）：</div>
        <RadioGroup v-model="intentionLevel" type="button" button-style="solid" size="large"
          @on-change='chooseData'>
          <Radio v-for="(item,index) in intentionLevelData" :key='index' :label="item.value">
          </Radio>
        </RadioGroup>
      </div>
      <Input v-model="textCon" maxlength="300" show-word-limit type="textarea"
        placeholder="请添加批注内容，不超过300字" :rows="4" @on-cancel="addCancel" />

      <div class="transferFooter">
        <Button @click="addCancel">取消</Button>
        <Button type="info" @click="addSave">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import customerMgr from '@/biz/customer/customer'
  import CustomerMgr from '@/biz/customer/customerOpt.js'
  import tool from '@/common/tool'
  export default {
    props: ['followUpList', 'popData', 'cityCode', 'popLoading', 'flag', 'intentionLevelFlag'],
    data() {
      return {
        intentionLevel: "",
        intentionLevelId: '',
        modalFlag: false,
        textCon: '',
        spinShow: true,
        intentionLevelData: CustomerMgr.intentionLevel(),
      }
    },
    created() {
      if (this.popData.intentionLevel) {
        this.intentionLevel = this.popData.intentionLevel
      }

      this.intentionLevelData.forEach(item => {
        if (item.value == this.popData.intentionLevel) {
          this.intentionLevelId = item.key
        }
      });
    },
    methods: {
      chooseData(val) {
        this.intentionLevelData.forEach(item => {
          if (item.value == val) {
            this.intentionLevelId = item.key
          }
        });

        console.log(this.intentionLevelId, this.intentionLevel, 'vvvvvvvvv');
      },
      addCancel() {
        this.textCon = ''
        this.modalFlag = false
      },
      addSave() {
        console.log(this.popData, 'this.popDatathis.popData');
        if (this.textCon == '') {
          this.$Message.warning('请输入批注内容。')
          return false
        }
        let params = {
          buildingId: this.popData.buildingId ? this.popData.buildingId : JSON.parse(this
            .$tool.getStorage('caseBuildingId')),
          createrId: JSON.parse(tool.getStorage('userMess')).userId,
          userId: JSON.parse(tool.getStorage('userMess')).userId,
          customerId: this.popData.customerId,
          followUp: 1,
          followUpType: 4,
          userCustomerId: this.popData.userCustomerId,
          remark: this.textCon,
          intentionLevel: this.intentionLevelId,
          intentionLevelName: this.intentionLevel,
        }
        customerMgr.insertFollowUp(params)
          .then((res) => {
            this.$Message.success('添加批注成功。')
            this.$emit('initList')
            this.addCancel()
            this.$dt.stats.comment(params.customerId, params.remark.length)
          })
      },
      commentsClick() {
        this.modalFlag = true
        this.$emit('popClose')
      },

      timeSub(time) {
        return time.substring(0, time.length - 3)
      },
    },
    // watch: {
    //   intentionLevel(val) {
    //     this.intentionLevel = val

    //   }
    // },

    computed: {
      followUpListCon() {
        if (this.followUpList && this.followUpList.length) {
          return this.followUpList.slice(0, 3)
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .poptipContent {
    .poptipContent {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 10px 0 20px;

      .close {
        color: #2b85e4;
        cursor: pointer;
      }
    }

    .time {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      color: #999;
    }

    .content {
      margin-top: 5px;
    }
  }

  .transferFooter {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }

  .loadingBox {
    position: relative;
  }

  // .intentionLevel {
  //   .ivu-radio-group-button-solid .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled) {
  //     background: #ccc;
  //     border-color: #ccc;
  //   }
  // }
</style>
<style>
  .popClass {
    display: none;
  }

  .M_poptip {
    position: relative;
  }

  .M_poptip .ivu-poptip-inner {
    background: rgba(235, 247, 255, 1);
  }

  .M_poptip .ivu-icon-ios-help-circle:before {
    display: none;
  }

  .M_poptip .ivu-btn-text {
    position: absolute;
    top: 30px;
    right: 10px;
    color: #0f42a7;
  }

  .M_poptip .ivu-poptip-footer .ivu-btn-primary {
    background: none;
    border: none;
    color: #0f42a7;
  }

  .M_comments {
    position: absolute;
    bottom: 24px;
    left: 33px;
  }

  .spinBox {
    background: rgba(235, 247, 255, 1);
  }
</style>